<!-- search START -->
<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">客户</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入客户ID"
            [(ngModel)]="seachParams.userId"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">直降活动</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入ID/名称"
            [(ngModel)]="seachParams.activity"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">下单时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="placeOrderTimes" (ngModelChange)="onDateChange($event)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">订单状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="全部"
            [(ngModel)]="orderStateSelecteds"
            (ngModelChange)="orderStateChange($event)">
            <nz-option
              *ngFor="let item of orderStateOptions | keyvalue"
              nzLabel="{{ item.value }}"
              nzValue="{{ item.key }}">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
          <button nz-button nzType="default" (click)="resetData()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>
<!-- search END -->

<nz-card>
  <div class="opera-wrap p-b-10">
    <button
      nz-button
      nzType="primary"
      (click)="exportTable(1)"
    >导出主信息</button>

    <button
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="exportTable(2)"
    >导出明细信息</button>
  </div>

  <!-- Table -->
  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1000px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableForms.tableLoading"
      [nzData]="tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableForms.total"
      [nzPageIndex]="tableForms.page"
      [nzPageSize]="tableForms.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="180px" nzLeft>订单编号</th>
          <th nzAlign="center" nzWidth="140px">订单状态</th>
          <th nzAlign="center" nzWidth="260px">直降活动</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="120px">应付金额</th>
          <th nzAlign="center" nzWidth="120px">实付金额</th>
          <th nzAlign="center" nzWidth="120px">优惠总额</th>
          <th nzAlign="center" nzWidth="120px">本优惠抵值</th>
          <th nzAlign="center" nzWidth="180px">下单时间</th>
          <th nzAlign="center" nzWidth="180px">付款时间</th>
          <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td nzAlign="center" nzLeft>{{ data.orderNum || '-' }}</td>
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | orderColorStatus}">
              {{ data.status | orderStateStatus }}
            </span>
          </td>
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              nzSize="small"
              [disabled]="!data.activityName"
              [routerLink]="['/sell/descentDetails', data.activityId]"
              target="_blank"
            >
              {{ data.activityName || '-' }} [{{ data.activityId }}]
            </a>
          </td>
          <td nzAlign="center">
            <a nz-button nzType="link" nzSize="small" [routerLink]="['/customer/tabs', data.userId, 0]" target="_blank">{{ data.userId }}</a>
          </td>
          <td nzAlign="center">{{ data.totalPrice || '0' }}</td>
          <td nzAlign="center">{{ data.realPrice || '0' }}</td>
          <td nzAlign="center">{{ data.favorablePrice || '0' }}</td>
          <td nzAlign="center">{{ data.discountValue || '0' }}</td>
          <td nzAlign="center">{{ data.orderTime || '-' }}</td>
          <td nzAlign="center">{{ data.payTime || '-' }}</td>
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nzType="primary"
              nzType="link"
              nzSize="small"
              (click)="openModel(data)">
              跟进订单
            </button>
            
            <button
              *ngIf="(data.status == 5 || data.status == 6 || data.status == 7) && permission.userPermission.has('marketing:descentRecord:cancel')"
              nz-button
              nzType="primary"
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="cannlOrder(data)">
              取消订单
            </button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
  </div>
</nz-card>

<!-- 跟进model -->
<app-followup-model #myFollowup [oddNumber]="oddNumber" (deterMine)="submitData($event)"></app-followup-model>